<script lang="ts" setup>
import { ListenerProp } from '@varlet/ui';
// 弹出框显示
defineProps<{
    radius?: boolean;
    show?: boolean;
    title?: string;
    'onUpdate:show'?: ListenerProp<(show: boolean) => void>;
}>();
// 定义外部事件
const emit = defineEmits(['update:show']);

// 内部事件
const onHide = () => {
    emit('update:show', false);
};

</script>
<template>
    <VarPopup :class="['default-bottom-popup', radius ? 'default-bottom-popup-radius' : '']" :show="show" position="bottom"
        @close="onHide" @click-overlay="onHide" teleport="body">
        <div class="bottom-popup-header">
            <span class="header-left">
                <slot name="header-left"></slot>
            </span>
            <span class="header-title">{{ title }}</span>
            <Icon name="icon-danchuangguanbiicon" @click="onHide"></Icon>
        </div>

        <div class="bottom-popup-content">
            <slot></slot>
        </div>
    </VarPopup>
</template>
<style lang="scss" scoped>
.default-bottom-popup {

    .bottom-popup-header {
        height: 97px;
        font-size: 30px;
        color: $text-sub;
        border-bottom: 1px solid $border-sub;
        padding-left: 48px;
        padding-right: 48px;
        @include center;
        position: relative;

        .header-left {
            position: absolute;
            left: 48px;
            z-index: 9;
        }

        .header-title {
            position: absolute;
            right: 100px;
            left: 100px;
            max-width: 560px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;

        }

        .icon-danchuangguanbiicon {
            position: absolute;
            right: 20px;
            color: $close-icon;
        }
    }
}
</style>
<style lang="scss">
.default-bottom-popup-radius {
    border-radius: 20px 20px 0px 0px;
}
</style>
